<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>营销管理</el-breadcrumb-item>
            <el-breadcrumb-item>包邮规则管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">包邮</h3>
          <el-form :inline="true"  class="demo-form-inline" style="text-align: left" ref="searchbox">
            <el-form-item label="名称">
              <el-input v-model="name" placeholder="请输入规则名称"></el-input>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="status" placeholder="请选择状态">
                <el-option label="全部"></el-option>
                <el-option label="未启用" value="0"></el-option>
                <el-option label="已启用" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button  @click="resetBox">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      <el-card style="margin-top: 30px">

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">秒杀列表
              <div style="float: right;margin-right: 30px;">
                <el-button type="primary" size="mini" @click="showAddNew">新建</el-button>
              </div>
            </h3>
            <el-table :data="freeShippingList" border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="规则名称" prop="name"></el-table-column>
              <el-table-column label="规则说明" prop="introduce"></el-table-column>
              <el-table-column label="包邮阈值" prop="threshold"></el-table-column>
              <el-table-column label="规则状态" prop="status">

                <template slot-scope="scope">
                <el-tooltip :content="caseStatusArr[scope.row.status]" placement="top">
                    <el-switch
                        v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0"
                        @change="changeStatus(scope.row)"
                        :disabled = "scope.row.status == 1"
                    >
                    </el-switch>
                </el-tooltip>

              </template>
              </el-table-column>
                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
<!--                        <el-button type="info" size="mini" @click="showData(scope.row.id)" >数据</el-button>-->
                        <el-button type="warning" size="mini" @click="showChange(scope.row)" v-show="scope.row.id != 1">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum1"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize1"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total1"
            ></el-pagination>
        </el-card>

      <!--修改-->
      <el-dialog title="修改包邮规则" :visible.sync="changeDialogVisible" width="50%" @close="cancelChange">
        <el-form
            :model="changeForm"
            :rules="addFormRules"
            ref="addUserFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="活动名称:" prop="name" placeholder="请输入名称">
            <el-input v-model="changeForm.name"></el-input>
          </el-form-item>

          <el-form-item label="活动描述:" prop="introduce" placeholder="请输入规则描述">
            <el-input v-model="changeForm.introduce"></el-input>
          </el-form-item>

          <el-form-item label="包邮阈值:" prop="threshold" placeholder="请输入包邮阈值">
            <el-input v-model="changeForm.threshold"></el-input>
          </el-form-item>

          <el-form-item label="是否全场通用" prop="effective" >

            <el-tooltip  placement="top">
              <el-switch
                  v-model="changeForm.effective"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
              >
              </el-switch>
            </el-tooltip>

          </el-form-item>


          <el-card v-show="changeForm.effective == 0">
            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
              适用商品列表
              <el-button type="primary" style="float: right" size="mini" @click="showAdd">修改商品</el-button>
            </h3>

            <!--      新增过来的表格-->
            <el-table :data="addList"  border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="商品封面">
                <template slot-scope="scope">
                  <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
                </template>

              </el-table-column>
              <el-table-column label="商品名称" prop="commodityname"></el-table-column>
            </el-table>

            <el-button type="primary" @click="doChange">确 定</el-button>
            <el-button @click="cancelChange">取 消</el-button>
          </el-card>

        </el-form>



        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doChange">确 定</el-button>
        <el-button @click="cancelChange">取 消</el-button>
      </span>
      </el-dialog>


      <!--新增-->
      <el-dialog title="新增包邮规则" :visible.sync="addDialogVisible" width="50%" @close="cancelChange">
        <el-form
            :model="addForm"
            :rules="addFormRules"
            ref="addUserFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="活动名称:" prop="name" placeholder="请输入名称">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>

          <el-form-item label="活动描述:" prop="introduce" placeholder="请输入规则描述">
            <el-input v-model="addForm.introduce"></el-input>
          </el-form-item>

          <el-form-item label="包邮阈值:" prop="threshold" placeholder="请输入包邮阈值">
            <el-input v-model="addForm.threshold"></el-input>
          </el-form-item>

          <el-form-item label="是否全场通用" prop="effective" >

            <el-tooltip  placement="top">
              <el-switch
                  v-model="addForm.effective"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
              >
              </el-switch>
            </el-tooltip>
          </el-form-item>


          <el-card v-show="addForm.effective == 0">
            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
              适用商品列表
              <el-button type="primary" style="float: right" size="mini" @click="showAdd2">修改商品</el-button>
            </h3>

            <!--      新增过来的表格-->
            <el-table :data="addNewList"  border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="商品封面">
                <template slot-scope="scope">
                  <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
                </template>

              </el-table-column>
              <el-table-column label="商品名称" prop="commodityname"></el-table-column>
            </el-table>
          </el-card>
        </el-form>



        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doAdd">确 定</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </span>
      </el-dialog>



      <!-- 隐藏的模态框   -->
      <el-dialog title="选择商品" :visible.sync="addDialogVisible1" width="50%" >
        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">商品查询</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input placeholder="请输入商品名称" clearable v-model="commodityname" @clear="searchCommodity">
                <el-button slot="append" icon="el-icon-search" @click="searchCommodity"></el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top: 30px">

          <el-table :data="commodityList" @selection-change="idChance" border stripe ref="multipleTable">
            <el-table-column type="selection" width="60" >
            </el-table-column>
            <el-table-column label="商品封面">
              <template slot-scope="scope">
                <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="commodityname"></el-table-column>
            <el-table-column label="商品价格" prop="commodityprice"></el-table-column>
            <el-table-column label="销售量" prop="salecounts"></el-table-column>
            <el-table-column label="商品状态" prop="commoditystatus">
              <template slot-scope="s">
                <span v-text="s.row.commoditystatus==1?'已上架':'未上架'"></span>
              </template>
            </el-table-column>
            <el-table-column label="上架时间" prop="salestarttime"></el-table-column>


          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10 , 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          ></el-pagination>

        </el-card>
        <el-button type="primary" @click="doAdd0">确 定</el-button>
        <el-button type="primary" @click="addDialogVisible1 = false">取消</el-button>
      </el-dialog>

      <!-- 隐藏的模态框2   -->

      <el-dialog title="选择商品" :visible.sync="addDialogVisible2" width="50%" >
        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">商品查询</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input placeholder="请输入商品名称" clearable v-model="commodityname" @clear="searchCommodity">
                <el-button slot="append" icon="el-icon-search" @click="searchCommodity"></el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top: 30px">

          <el-table :data="commodityList" @selection-change="idChance" border stripe ref="multipleTable">
            <el-table-column type="selection" width="60" >
            </el-table-column>
            <el-table-column label="商品封面">
              <template slot-scope="scope">
                <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="commodityname"></el-table-column>
            <el-table-column label="商品价格" prop="commodityprice"></el-table-column>
            <el-table-column label="销售量" prop="salecounts"></el-table-column>
            <el-table-column label="商品状态" prop="commoditystatus">
              <template slot-scope="s">
                <span v-text="s.row.commoditystatus==1?'已上架':'未上架'"></span>
              </template>
            </el-table-column>
            <el-table-column label="上架时间" prop="salestarttime"></el-table-column>


          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10 , 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          ></el-pagination>

        </el-card>
        <el-button type="primary" @click="doAdd2">确 定</el-button>
        <el-button type="primary" @click="addDialogVisible2 = false">取消</el-button>
      </el-dialog>


    </div>
</template>
<script>

    export default {
        data() {
            return {
              pageNum1: 1,
              pageSize1: 10,
              total1: 0,
              addDialogVisible1: false,

              pageNum2: 1,
              pageSize2: 10,
              total2: 0,
              addDialogVisible2: false,



                pageNum: 1,
                pageSize: 10,
                total: 0,
                name:'',
                status:'',
                freeShippingList:[],
                caseStatusArr:{
                  0:"未启用规则",
                  1:"已启用",
                },
                addDialogVisible: false,

                addForm: {

                effective:1,

                },
                addFormRules: {


                },
                value1: [],
                addList:[],
                addNewList:[],
                iurl: this.$MyUrl.imgUrl+"commodity/",//图片地址
                changeDialogVisible:false,
                changeForm:{

                },
                readyList:[],
                commodityList:[],
            };
        },
        methods: {

              showAdd2(){
                this.addDialogVisible2 = true;
              },
              doAdd2(){
                console.log(this.readyList);
                this.addNewList = this.readyList;
                this.addDialogVisible2 = false;
              },
              doAdd(){
                this.addForm.list = this.addNewList;
                console.log(this.addForm);
                let url = "freeship/add";
                this.$axios.post(url,this.addForm).then(res=>{
                  if (res.data.code == 200) {
                    this.$message({
                      type: 'success',
                      message: res.data.msg,
                      duration: 1000
                    })
                    this.addDialogVisible = false;
                    this.addForm={
                      effective:1
                    };
                    this.addNewList = [];
                    this.reloadData();
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
              },
              cancelAdd(){
                this.addDialogVisible = false;
                this.addForm={
                  effective:0,
                };
              },
              showAddNew(){
                this.addDialogVisible = true;
              },

              doAdd0(){
                this.addList = this.readyList;
                this.addDialogVisible1 = false;
              },
              searchCommodity() {
                this.pageNum1 = 1;
                this.getCommodityList();
              },
          //根据名字查列表
              getCommodityList() {
                let url = "commodity/clist";
                this.$axios.get(url, {
                  params: {
                    name: this.commodityname,
                    now: this.pageNum,
                    size: this.pageSize
                  }
                }).then(res => {
                  if (res.data.code == 200) {
                    this.commodityList = res.data.data.list;
                    this.pageNum = res.data.data.pageNum;
                    this.pageSize = res.data.data.pageSize;
                    this.total = res.data.data.total;
                  } else {
                    this.$message({
                      type: "error",
                      message: res.data.msg,
                      duration: 1000
                    })
                  }
                });

            },
            idChance(selection){
              this.readyList =[];
              for(let o of selection){
                this.readyList.push(o);
              }
            },
            showData(id){

            },
            cancelChange(){
              this.changeDialogVisible = false;
              this.changeForm={};
            },
            doChange(){
              this.changeForm.list = this.addList;
              let url = "freeship/change";
              this.$axios.put(url,this.changeForm).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.changeDialogVisible = false;
                  this.reloadData();
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            showChange(obj){
              this.changeDialogVisible = true;
              this.addList = obj.list;
              let url = "freeship/findById";
              let id = obj.id;
              this.$axios.get(url,{
                params:{
                  id:id,
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.changeForm = res.data.data;
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })


            },

            showAdd(){
              this.addDialogVisible1 = true;
              this.$nextTick(() => {
                for (let com of this.addList) {
                  this.commodityList.forEach((item, index) => {
                    if (com.id === item.id) {
                      this.$refs.multipleTable.toggleRowSelection(this.commodityList[index], true)
                    }
                  })
                }
              })
            },



            changeStatus(obj){
              console.log(obj);

              let url = "freeship/changeStatus";
              this.$axios.put(url,obj).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.reloadData();
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            resetBox(){
                this.name="";
                this.status="";
                this.reloadData();
            },
            handleSizeChange(newSize) {
                this.pageSize1 = newSize;
                this.reloadData();
            },
            handleCurrentChange(newPage) {
                this.pageNum1 = newPage;
                this.reloadData();
            },

            search(){
              this.pageNum = 1;
              this.reloadData();
            },
          //初始化所有折扣
            getFreeShip(){
              let url = "freeship/showFreeship";
              this.$axios.get(url,{
                params:{
                  now:this.pageNum1,
                  size:this.pageSize1,
                  name:this.name,
                  status:this.status,
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.freeShippingList = res.data.data.list;
                  this.pageNum1 = res.data.data.pageNum;
                  this.pageSize1 = res.data.data.pageSize;
                  this.total1 = res.data.data.total;

                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            },

            reloadData() {
              this.getFreeShip();
              this.getCommodityList();
            }
        },
        created() {
            this.reloadData();
            this.getCommodityList();

        }
    };
</script>
<style lang="less" scoped>
</style>